<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchForm" label-width="100px" class="demo-form-inline">
      <el-form-item label="财套编码:">
        <el-input v-model="searchForm.financialCode" size="small" placeholder="请输入财套编码" />
      </el-form-item>
      <el-form-item label="公司名称:">
        <el-input v-model="searchForm.companyName" size="small" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item label="门店编号:">
        <el-input v-model="searchForm.storeId" size="small" placeholder="请输入门店编号" />
      </el-form-item>
      <el-form-item label="门店名称:">
        <el-input v-model="searchForm.storeName" size="small" placeholder="请输入门店名称" />
      </el-form-item>
      <el-form-item label="合同编号:">
        <el-input v-model="searchForm.contractId" size="small" placeholder="请输入合同编号" />
      </el-form-item>
      <el-form-item label="凭证流水号">
        <el-input v-model="searchForm.ProofWater" size="small" placeholder="请输入凭证流水号" />
      </el-form-item>
      <el-form-item label="会计年度:">
        <el-input v-model="searchForm.year" size="small" placeholder="请输入会计年度" disabled/>
      </el-form-item>
      <el-form-item label="是否上传:">
        <el-select v-model="searchForm.isupSAP" size="small" placeholder="请选择是否上传SAP">
          <el-option
            size="small"
            v-for="item in isupSAP"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮组 -->
    <el-row>
      <el-button type="primary" size="mini" @click="openPopUp" :disabled="isDisabled">预览凭证</el-button>
    </el-row>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="formData">
      <el-table-column type="selection" width="55" align="center" @selection-change="selectId"/>
      <el-table-column label="合同编号" prop="contractId" />
      <el-table-column label="凭证流水号" prop="voucherSerialNumber" :show-overflow-tooltip="true" />
      <el-table-column label="记账日期" prop="bookingTime" :show-overflow-tooltip="true" />
      <el-table-column label="公司名称" prop="companyName" :show-overflow-tooltip="true" />
      <el-table-column label="账套编码" prop="financialCode" :show-overflow-tooltip="true" />
      <el-table-column label="门店编码" prop="storeId" :show-overflow-tooltip="true" />
      <el-table-column label="门店名称" prop="storeName" :show-overflow-tooltip="true" />
      <el-table-column label="租赁负债-未确认融资费用" prop="unreFinancingMoney" :show-overflow-tooltip="true" />
      <el-table-column label="当月计提摊销额" prop="accrueAmortize" :show-overflow-tooltip="true" />
      <el-table-column label="是否上传SAP" prop="isSapText" :show-overflow-tooltip="true" />
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--预览凭证-->
    <!--预览凭证-->
    <el-dialog title="预览凭证" :visible.sync="ispreview" :before-close="closePopUp">
      <el-table
        :data="previewDocuments"
        border
        style="width: 100%">
        <el-table-column
          prop="toLoanSign"
          label="借贷标志"
          width="180">
        </el-table-column>
        <el-table-column
          prop="entryName"
          label="分录名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="money"
          label="金额(元)">
        </el-table-column>
        <el-table-column
          prop="bookingTime"
          label="记账日期">
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="摘要">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="popupHandleSizeChange"
        @current-change="popupHandleCurrentChange"
        :current-page.sync="showPage.currentPage"
        :page-size="showPage.pageSize"
        layout="total, prev, pager, next"
        :total="showPage.pageTotal">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { queryPreviewV, queryOnePreviewVoucher } from '@/api/txzk'
export default {
  mounted() {
    this.loading = false
  },
  name: 'UiAmortization',
  data() {
    return {
      // 搜索条件
      searchForm: {
        financialCode: '',
        companyName: '',
        storeId: '',
        storeName: '',
        contractId: '',
        ProofWater: '',
        isupSAP: '',
        year: ''
      },
      loading: true,
      formData: [],
      // 预览凭证
      previewDocuments: [],
      page: 1,
      total: 10,
      // 是否上传
      isupSAP: [{
        id: 1,
        value: '全部'
      }, {
        id: 2,
        value: '是'
      }, {
        id: 3,
        value: '否'
      }],
      // 显示dialog
      ispreview: false,
      // 显示页数
      showPage: {
        currentPage: 1, // 当前显示页数
        pageSize: 10, // 选项设置
        pageTotal: 20 // 总数量
      },
      // 合同编号
      contractId: '',
      // 是否禁用按钮
      isDisabled: false
    }
  },
  methods: {
    // 搜索按钮
    onSubmit() {
      if (this.searchForm.financialCode !== '' || this.searchForm.companyName !== '' || this.searchForm.storeId !== '' || this.searchForm.storeName !== '' || this.searchForm.contractId !== '' || this.searchForm.ProofWater !== '' || this.searchForm.isupSAP !== '' || this.searchForm.year !== '') {
        queryPreviewV(this.searchForm).then(res => {
          this.$message({
            message: '查询成功',
            type: 'success'
          })
        })
      } else {
        this.$message({
          message: '您暂时没有输入查询条件',
          type: 'warning'
        })
      }
    },
    // 页面大小
    handleSizeChange(val) {
      this.limit = val
      this.queryDeptData()
    },
    // 前去第几页
    handleCurrentChange(val) {
      this.page = val
      this.queryDeptData()
    },
    // 获取ID
    selectId(val) {
      if (val.length > 1 || val.length === 0) {
        this.isDisabled = true
      } else {
        this.contractId = val[0].contractId
        this.contractType = val[0].contractType
        this.isDisabled = false
      }
    },
    // 关闭dialog
    closePopUp() {
      this.ispreview = false
    },
    // 打开dialog
    openPopUp() {
      queryOnePreviewVoucher(this.contractId).then(res => {
        console.log(res)
      })
      this.ispreview = true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row{
  margin: 20px 0;
}
.el-pagination{
  margin: 20px 0px 0px 60%;
}
</style>
